import { size, IFormProps, pageSize } from '../../utils/common';
import React from 'react';
import { connect } from 'dva';
import { Form, Row, Col, Button, Input, Table, Popconfirm } from 'antd';
import { PaginationProps } from 'antd/lib/pagination';
const Styles = require('../../styles/index.less');
import * as api from '../../api/api';

export interface IRolesPros extends IFormProps {
    role: any
}
class Roles extends React.PureComponent<IRolesPros, any>{
    constructor(props) {
        super(props);
        this.state = {}
    }

    search=()=>{
        this.getRoles();
    }

    getRoles = (payload?) => {

        payload = Object.assign({}, this.props.role.roleSearchs, this.props.form.getFieldsValue(), { ...payload });
        this.props.dispatch({
            type: 'role/getRoles',
            payload

        });
    }

    reset = () => {
        this.props.form.resetFields();
    }

    edit = (id) => {
        this.props.history.push('/role/role?id=' + id);
    }

    add = () => {
        this.props.history.push('/role/role');
    }

    remove = (id) => {
        this.props.dispatch({
            type: 'role/remove',
            payload: {
                form: { id }
            }
        })
    }

    render(): JSX.Element {
        //console.log(this.props);
        const { getFieldDecorator } = this.props.form;
        const { loading } = this.props;
        const { role,
            roles: { items },
            roleSearchs:{keywords},
        } = this.props.role;

        return (
            <Row className={Styles.F_BG_WHITE1}>
                <Row className={Styles.F_BG_WHITE}>
                    <Col span={24}>
                        <Form layout="inline">
                            <Form.Item>
                                <Button size={size} onClick={this.add}>新增</Button>
                            </Form.Item>
                            <Form.Item>
                                {getFieldDecorator("keywords", {
                                    initialValue: keywords
                                })(<Input
                                    style={{ width: 200 }}
                                    size={size}
                                    placeholder="输入用户名/昵称/手机号"
                                />)}
                            </Form.Item>
                            <Form.Item>
                                <Button size={size} type='primary' loading={loading} onClick={this.search}>查询</Button>
                            </Form.Item>
                        </Form>
                        <Col span={24}>
                            <hr className={Styles.hrBorder} />
                            <h3>角色列表</h3>
                        </Col>
                        <Col span={24}>
                            <Table
                                dataSource={items}
                                bordered
                                pagination = {false}
                                rowKey={(record: api.SingleUserMallUsersVOAdminVO) => String(record.id)}
                                loading={loading}
                            >
                                <Table.Column title="序号" key="no" render={(text, record, index) => {
                                    return index + 1
                                }} />
                                <Table.Column title="角色名" key="name" dataIndex="name" />
                                <Table.Column title="操作" render={(text, record: api.SingleUserMallUsersVOAdminVO, index) => {
                                    return (
                                        <div>
                                            <a className={Styles.M_RIGHT} onClick={() => this.edit(record.id)}>
                                                编辑
                                            </a>
                                            <Popconfirm title="确定删除吗?" onConfirm={() => { this.remove(record.id); }}>
                                                <a>删除</a>
                                            </Popconfirm>
                                        </div>
                                    );
                                }} />
                            </Table>
                        </Col>
                    </Col>
                </Row>
            </Row>)
    }
}

export default connect(({ role, loading: { models: { role: loading } } }) => ({ role, loading }))(Form.create()(Roles));
